<template>
   <div>
      <input type="text" placeholder="请输入数字" v-model="num1">
      <input type="text" placeholder="请输入数字" v-model="num2">
   </div>
   <div>
      <button @click="calc('+')">加法</button>
      <button @click="calc('-')">减法</button>
      <button @click="calc('*')">乘法</button>
      <button @click="calc('/')">除法</button>
   </div>
    <div>
        <span>结果为:{{result}}</span>
    </div>
</template>

<script setup>
   import {ref} from 'vue';
   let num1 = ref(0);
   let num2 = ref(0);
   let result = ref(0);
   function calc(opt){
      //eval用于执行字符串
      result.value = eval(num1.value +opt+num2.value);
   }
</script>

<!--Vue2.x写法-->
<!--
<script>
  export default {
    data(){
      return {
        num1:0,
        num2:0,
        result:0
      }
    },
    methods:{
      calc(opt){
        this.result = eval(this.num1 +opt+this.num2);
      }
    }
  }
</script>
-->
<style scoped>

</style>